id: task-215.01
title: 'TUI sequences: read-only view'
status: Done
assignee:
- '@codex'
created_date: '2025-08-23 19:12'
updated_date: '2025-08-23 22:32'
labels:
- sequences
dependencies: []
parent_task_id: task-215
Description
Render a read-only TUI view of sequences using the core compute function (task-213). Show sequences vertically with each task as "task- - ".</p>
<h2>Acceptance Criteria</h2>
<!-- AC:BEGIN -->
<ul>
<li>[x] #1 Lists sequences using computeSequences results</li>
<li>[x] #2 Displays tasks under each sequence as task-<id> - <title></li>
<li>[x] #3 No crashes when rendering large lists</li>
<li>[x] #4 Render each sequence as a bordered block labeled "Sequence <n>" with tasks inside</li>
</ul>
<!-- AC:END -->
<h2>Implementation Plan</h2>
<p>Plan:</p>
<ul>
<li>Add read-only blessed TUI view for sequences.</li>
<li>Use computeSequences to populate groups; no extra logic.</li>
<li>Render vertically: "Sequence <n>" header + "task-<id> - <title>" lines.</li>
<li>Keys: q/Esc to exit; arrows not required yet.</li>
<li>Replace interactive path of <code>sequence list</code> to call this view.</li>
<li>Ensure large lists render without crashing; avoid heavy reflow.</li>
</ul>
<h2>Implementation Notes</h2>
<p>Implementation Notes:</p>
<ul>
<li>Added <code>runSequencesView</code> in <code>src/ui/sequences.ts</code> using blessed; read-only, scrollable, exits with <code>q</code>/<code>Esc</code>.</li>
<li>Wired CLI interactive path (<code>backlog sequence list</code>) to call the new view; <code>--plain</code> output unchanged.</li>
<li>Uses <code>computeSequences</code> from core to populate groups; no duplicate logic.</li>
<li>Renders lines as <code>Sequence <n>:</code> followed by <code>task-<id> - <title></code>.</li>
<li>Designed for large lists: scrollable container with <code>alwaysScroll</code> and minimal reflow.</li>
</ul>
<p>Updated TUI to render one bordered block per sequence, labeled and stacked vertically. Interactive default invokes the TUI; --plain unchanged. Verified type-check and relevant tests.</p>
<p>Final check: Verified bordered blocks render correctly without overlapping container borders (left:0, right:0). Ready to proceed to navigation/detail in 215.02.</p>
<!-- BODY END -->
</article>
</div>
<div class="right-sidebar">
<header>On this page</header>
<p>
<!-- OUTLINE START -->
<div class="outline"><ol class="outline-level-1"><ol class="outline-level-2"><li class="outline-item-level-2"><a href="#Description">Description</a></li><li class="outline-item-level-2"><a href="#AcceptanceCriteria">Acceptance Criteria</a></li><li class="outline-item-level-2"><a href="#ImplementationPlan">Implementation Plan</a></li><li class="outline-item-level-2"><a href="#ImplementationNotes">Implementation Notes</a></li></ol></li></ol></div>
<!-- OUTLINE END -->
</p>
</div>
<div id="popup-overlay" class="popup-overlay hidden"></div>
</div>
<div class="bottombar">
<span>Brodocs MVP</span>
</div>
<div id="popup-modal" class="popup-modal">
<div class="popup-header">
<span id="popup-title" class="popup-title">Example Popup Title</span>
<button class="popup-close" id="popup-close-btn">×</button>
</div>
<hr class="popup-separator"/>
<div id="popup-content" class="popup-content">
<p>This is some example popup content text.</p>
</div>
<button class="popup-confirm" id="popup-confirm-btn">Close</button>
</div>
</body>
</html>
